<template>
  <div id="search">
    <form>
      <!-- <div id="search-panel">
        <input type="text" placeholder="请输入您要搜索的内容..." />
      </div>
      <div id="search-button">
        <input type="submit" value="搜索" />
      </div> -->
    </form>
    <el-input
      placeholder="请输入内容"
      v-model="input"
      class="input-with-select"
      type="text"
      size="small"
    ></el-input>
    <el-button
      slot="append"
      icon="el-icon-search"
      type="primary"
      class="Sbutton"
      size="small"
      @click="mhSearch()"
    ></el-button>
  </div>
</template>
<script>
import { EventBus } from "../event-bus.js";
export default {
  data() {
    return {
      input: ""
    };
  },
  methods: {
    mhSearch() {
      EventBus.$emit("search", {
        // brand: this.input,
        carType: this.input
      });
    }
  }
};
</script>
<style scoped>
/*搜索框*/
#search {
  width: 50%;
  height: 40px;
  /* border:1px solid #000; */
  /* background-color:pink; */
  margin: 0 auto;
  /* background-color: #fff; */
}
/* #search form{
    margin-top:10px;
} */
/* #search-panel input {
  box-sizing: border-box;
  float: left;
  width: 80%;
  height: 30px;
} */
/* #search-button input {
  border-left-style: none;
  border: none;
  box-sizing:content-box;
  width: 15%;
  height: 40px;
  background-color: #007bff;
  color: #fff;
} */
.input-with-select {
  width: 80%;
  /* box-sizing: border-box; */
}
.Sbutton {
  /* float:right; */
  /* display:inline   ; */
  background-color: #007bff;
  width: 10%;
  height: 30px;
  /* box-sizing:content-box; */
  /* border-left-style: none; */
  /* border: none; */
  /* line-height:-20px; */
  /* border:none; */
}
</style>